<script setup lang="ts">
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'

interface Resident {
  id: number
  name: string
  age: number
  room: string
  healthStatus: string
  emergencyContact: string
}

const residents = ref<Resident[]>([
  {
    id: 1,
    name: '张明',
    age: 75,
    room: '201',
    healthStatus: '稳定',
    emergencyContact: '张小明 (儿子) - 13800138000'
  },
  {
    id: 2,
    name: '李芳',
    age: 68,
    room: '202',
    healthStatus: '良好',
    emergencyContact: '李华 (女儿) - 13800138001'
  },
  {
    id: 3,
    name: '王建国',
    age: 82,
    room: '203',
    healthStatus: '需要关注',
    emergencyContact: '王丽 (女儿) - 13800138002'
  },
  {
    id: 4,
    name: '刘淑华',
    age: 71,
    room: '204',
    healthStatus: '稳定',
    emergencyContact: '刘强 (儿子) - 13800138003'
  }
])

const dialogVisible = ref(false)
const searchQuery = ref('')

const getStatusType = (status: string) => {
  switch (status) {
    case '良好':
      return 'success'
    case '稳定':
      return ''
    case '需要关注':
      return 'warning'
    default:
      return 'info'
  }
}
</script>

<template>
  <div class="resident-management">
    <div class="page-header">
      <div class="header-content">
        <h1>住户管理</h1>
        <p class="subtitle">管理所有入住老人信息</p>
      </div>
      <el-button type="primary" @click="dialogVisible = true" class="add-button">
        <el-icon><Plus /></el-icon>
        添加住户
      </el-button>
    </div>

    <el-card class="resident-card">
      <div class="table-header">
        <el-input
          v-model="searchQuery"
          placeholder="搜索住户..."
          class="search-input"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>

      <el-table 
        :data="residents" 
        style="width: 100%"
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          fontWeight: 600
        }"
      >
        <el-table-column prop="name" label="姓名" min-width="100" />
        <el-table-column prop="age" label="年龄" width="80" align="center" />
        <el-table-column prop="room" label="房间号" width="100" align="center" />
        <el-table-column label="健康状况" width="120" align="center">
          <template #default="{ row }">
            <el-tag
              :type="getStatusType(row.healthStatus)"
              effect="light"
              size="small"
              class="status-tag"
            >
              {{ row.healthStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="emergencyContact" label="紧急联系人" min-width="200" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default>
            <div class="action-buttons">
              <el-button 
                class="action-button edit-button"
                style="background-color: #0066cc; color: #ffffff;"
              >
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
              <el-button
                class="action-button delete-button"
                style="background-color: #ff3b30; color: #ffffff;"
              >
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.resident-management {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .header-content {
      h1 {
        font-size: 28px;
        font-weight: 600;
        margin: 0 0 8px;
        color: var(--primary-text);
      }

      .subtitle {
        font-size: 16px;
        color: var(--secondary-text);
        margin: 0;
      }
    }

    .add-button {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      font-size: 16px;
    }
  }

  .resident-card {
    .table-header {
      margin-bottom: 20px;
      
      .search-input {
        width: 300px;
      }
    }
    
    .status-tag {
      min-width: 65px;
    }

    .action-buttons {
      display: flex;
      gap: 12px;
    }

    .action-button {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        opacity: 0.9;
      }

      .el-icon {
        font-size: 14px;
      }
    }
  }
}
</style>